<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- HTMLElement -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement -->
    <!-- HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口. -->


    <p>GlobalEventHandlers.onchange</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onchange -->
    <!-- onchange可以用来获取或设置当前元素的change事件的事件处理函数. -->
    <div>
        <input id="username" type="text">
    </div>
    <script>
        document.getElementById('username').onchange = function (event) {
            var target = event.target;
            console.log('username changed: ' + target.value);
        };
    </script>
    <hr>

    <p>GlobalEventHandlers.onfocus</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onfocus -->
    <!-- onfocus 属性用来获取或设置当前元素的focus事件的事件处理函数. -->
    <div>
        <input id="password" type="text">
    </div>
    <script>
        document.getElementById('password').onfocus = function (event) {
            var target = event.target;
            console.log('password focus');
        };
    </script>
    <hr>

    <p>GlobalEventHandlers.onblur</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onfocus -->
    <!-- onblur属性用来获取或设置当前元素的onBlur事件的事件处理函数 -->
    <div>
        <input id="address" type="text">
    </div>
    <script>
        document.getElementById('address').onblur = function (event) {
            var target = event.target;
            console.log('address blur');
        };
    </script>
    <hr>

    <p>GlobalEventHandlers.onselect</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onselect -->
    <!-- onselect用来获取或设置当前窗口的select事件的事件处理函数 -->
    <div>
        <textarea name="msg" id="msg" cols="30" rows="10">Please leave your message.</textarea>
    </div>
    <script>
        document.getElementById('msg').onselect = function (event) {
            var target = event.target;
            var msg = target.value;
            var msg_selected = msg.substring(target.selectionStart, target.selectionEnd);
            console.log('msg is selected. msg is ' + msg + ", msg_selected is " + msg_selected);
        };
    </script>


    <hr style="border: solid 2px red;">


    <p>HTMLElement.click()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/click -->
    <!-- 触发元素的点击事件 -->
    <!-- The HTMLElement.click()方法可以用来模拟鼠标左键单击一个元素。 -->
    <div>
        <button id="btn_01" onclick="alert('谁敲我-_-');">大王叫我来巡山 ^_^</button>
        <button onclick="doClick();">敲敲他，看他再得瑟</button>
    </div>
    <script>
        function doClick() {
            var btn_01 = document.getElementById('btn_01');
            btn_01.click();
        }
    </script>
    <hr>

    <p>HTMLElement.focus()</p>
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus -->
    <!-- 元素获得焦点 -->
    <!-- The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused element is the element which will receive keyboard and similar events by default. -->
    <p>HTMLElement.blur()</p>
    <!-- 元素失去焦点 -->
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur -->
    <!-- The HTMLElement.blur() method removes keyboard focus from the current element. -->
    <div>
        <input id="username" type="text">
        <button onclick="doFocus();">获取焦点</button>
        <button onclick="doBlur();">失去焦点</button>
    </div>
    <script>
        function doFocus() {
            var usernameNode = document.getElementById('username');
            usernameNode.focus();
        }
        function doBlur() {
            var usernameNode = document.getElementById('username');
            usernameNode.blur();
        }
    </script>
    <hr>

    <p>HTMLInputElement.select()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/select -->
    <!-- HTMLInputElement.select() 方法选中一个 <textarea> 元素或者一个带有 text 字段的 <input> 元素里的所有内容。 -->
    <div>
        <input id="email" type="email" value="abc@xyz.com">
        <button onclick="doSelect();">选择</button>
    </div>
    <script>
        function doSelect() {
            var emailNode = document.getElementById('email');
            emailNode.select();
        }
    </script>

</body>

</html>